<template>
  <div>
    <tab-selector
      v-model="tabSelector"
      :options="tabSelectorOptions"
      @tab-change="handleTabSelector"
    ></tab-selector>

    <el-form inline label-width="68px">
      <el-form-item label="到店时间">
        <el-date-picker
          :value="orderTime"
          type="daterange"
          :editable="false"
          :clearable="false"
          format="yyyy-MM-dd HH:mm"
          :picker-options="{ firstDayOfWeek: 1 }"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @input="handleOrderTime"
        />
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="timeType" @change="handleTimeType">
          <el-radio-button label="自然时间">自然时间</el-radio-button>
          <el-radio-button label="扎帐时间">扎帐时间</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <columns-filter-button></columns-filter-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="tableData" stripe>
      <el-table-column width="55" align="center" fixed="left">
        <template slot-scope="scope">
          <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
        </template>
      </el-table-column>
      <columns-filter-view>
        <el-table-column
          label="客户姓名"
          align="center"
          min-width="120"
          prop="yiyaClinicPerson.name"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="客户电话"
          align="center"
          min-width="120"
          prop="yiyaClinicPerson.name"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column label="性别" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.yiyaClinicPerson.sex }}
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="年龄"
          align="center"
          min-width="120"
          prop="yiyaClinicPerson.age"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="客户状态"
          align="center"
          min-width="120"
          prop="yiyaClinicPerson.personStatus "
        >
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="项目应收"
          align="center"
          min-width="120"
          prop="yiyaBillingMain.receivable"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="本次应收"
          align="center"
          min-width="120"
          prop="yiyaMainClosingEntries.thisPay"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="本次实收"
          align="center"
          min-width="120"
          prop="yiyaMainClosingEntries.thisPay"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="欠费变动"
          align="center"
          min-width="120"
          prop="yiyaMainClosingEntries.arrearageChange"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="用户欠费"
          align="center"
          min-width="120"
          prop="yiyaMainClosingEntries.personArrearage"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="优惠抵扣"
          align="center"
          min-width="120"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="收费类型"
          align="center"
          min-width="120"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="状态"
          align="center"
          min-width="120"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="单据号"
          align="center"
          min-width="120"
          prop="yiyaMainClosingEntries.documentNum"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="tc姓名"
          align="center"
          min-width="120"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="首次开单时间"
          align="center"
          min-width="160"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="开单时间"
          align="center"
          min-width="160"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="结账时间"
          align="center"
          min-width="160"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="开单备注"
          align="center"
          min-width="160"
        ></el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="结账备注"
          align="center"
          min-width="160"
        ></el-table-column>
      </columns-filter-view>
      <empty slot="empty"></empty>
    </el-table>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getEntriesPro, getEntriesWay } from '@/api/services/entries'
import { customerStatusOptions } from '@/utils/options'
import { getTodayStartWithEnd } from '@/utils/date'

import TabSelector from '@/components/yiya/TabSelector'
import {
  ColumnsFilterButton,
  ColumnsFilterView,
} from '@/components/yiya/TableColumnsFilter'
import Empty from '@/components/yiya/Empty'

const QUERY_PARAMS = {
  pageNum: 1,
  pageSize: 10,
  personStatus: undefined,

  beginTime: undefined,
  endTime: undefined,
}

export default {
  name: 'ClosingRefund',
  components: {
    TabSelector,
    ColumnsFilterButton,
    ColumnsFilterView,
    Empty,
  },
  data() {
    return {
      tabSelector: ' ',
      timeType: '自然时间',
      orderTime: [],
      queryParams: {},
      tableRadio: null,
      loading: false,
      tableData: [],
      total: 0,
    }
  },
  computed: {
    tabSelectorOptions() {
      return [
        {
          label: '总人数',
          value: ' ',
        },
        ...customerStatusOptions.map(({ label, value }) => ({
          label,
          value,
          params: value,
        })),
      ]
    },
  },
  mounted() {
    this.queryParams = {
      ...QUERY_PARAMS,
    }
    const today = getTodayStartWithEnd()
    this.handleOrderTime(today)
  },
  methods: {
    handleTabSelector(e) {
      this.queryParams.personStatus = e.params
      this.handleQuery()
    },
    handleTimeType() {
      this.handleOrderTime(this.orderTime)
    },
    async getList() {
      try {
        this.loading = true
        this.tableRadio = null
        const { rows, total } = await getEntriesWay(this.queryParams)
        this.tableData = rows
        this.total = total
      } finally {
        this.loading = false
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleOrderTime([start, end]) {
      ;[start, end] = [dayjs(start).startOf('day'), dayjs(end).startOf('day')]
      if (this.timeType === '自然时间') {
        end = end.endOf('day')
      } else {
        if (start.toString() === end.toString()) {
          start = start.subtract(1, 'day')
        }
        ;[start, end] = [start.add(16, 'hour'), end.add(16, 'hour')]
      }
      this.orderTime = [start, end]
      this.queryParams.beginTime = new Date(start.format('YYYY-MM-DD HH:mm:ss'))
      this.queryParams.endTime = new Date(end.format('YYYY-MM-DD HH:mm:ss'))
      this.handleQuery()
    },
  },
}
</script>

<style scoped></style>
